<template>
  <div id='wrap'>
    <h1>响应式props解构</h1>
    <demo1 :user msg="放假10天" @sonEmit="hand"></demo1>
    <demo2 v-for="item in userArr" :key="item.id" :user="item"></demo2>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import { ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';
import demo1 from '../day1225/components/demo1.vue';
import type { Iuser } from '../day1224/components/demo5.vue';
import demo2 from './components/demo2.vue';
const user = ref<Iuser>({
  name: '小米',
  age: 18,
  sex: '男'
})

function hand(arg1: number, arg2: string, arg3: { name: string }) {
  console.log('子组件触发事件，参数如下：');
  console.log('参数1：', arg1);
  console.log('参数2：', arg2);
  console.log('参数3：', arg3);
}

const userArr = ref<Iuser[]>([
  {
    id: 1,
    name: '王小明',
    sex: '男',
    age: 17
  },
  {
    id: 2,
    name: '王小桃',
    sex: '女',
    age: 16
  },
  {
    id: 3,
    name: '王小绿',
    sex: '女',
    age: 16
  },
])
</script>

<style lang='scss'></style>
